<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">	
		<!-- 审核倒计时 -->
<!-- 	<u-count-down
		        :time="30 * 60 * 60 * 1000"
		        format="DD:HH:mm:ss"
		        autoStart
		        millisecond
		        @change="onChange"
		>
		    <view class="time">
		        <text class="time__item">{{ timeData.days }}&nbsp;天</text>
		        <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
		        <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
		        <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
		    </view>
		</u-count-down> -->
		<view class="task-info m-md ">
			<view class="task-info_title radius-10" @click="$util.go('task/task_detail?id='+orderInfo.task_id)">
				<view class="flex-start">
					<text class="badge">{{ orderInfo.task_type_text }}</text>
					<text class="m-l-xs text-sm">{{ orderInfo.task_title }}</text>
				</view>
				<m-icon name="arrow-right-s-line" size="35rpx"></m-icon>
			</view>
		</view>
		<view class="order-info conter">
			<view class="order-info_title">
				<m-icon color="#888" name="file-list-2-line" :text="$t('merchant-order-detail.cell-title')"></m-icon>
			</view>
			<u-cell-group :border="false">
				<u-cell :isLink="false" :border="false">
					<text slot="title" class="cell-title">{{ $t('merchant-order-detail.cell-item-1') }}</text>
					<view slot="value" class="cell-value">
						<view class="flex-start">
							<u-avatar :src="orderInfo.user_avatar" size="15"></u-avatar>
							<text class="text-xs u-line-1 m-l-xs">{{ orderInfo.username }}</text>
						</view>
					</view>
				</u-cell>
				<u-cell :isLink="false" :border="false">
					<text slot="title" class="cell-title">{{ $t('merchant-order-detail.cell-item-2') }}</text>
					<view slot="value" class="cell-value">
						<text class="" :class="{'text-warning' : orderInfo.state == 2 || orderInfo.state == 5,'text-danger' : orderInfo.state == 3,'text-success' : orderInfo.state == 4}">{{ orderInfo.state_desc }}</text>
					</view>
				</u-cell>
				<u-cell :isLink="false" :border="false">
					<text slot="title" class="cell-title">{{ $t('merchant-order-detail.cell-item-3') }}</text>
					<view slot="value" class="cell-value">
						<text>{{ $util.handleStr($t('merchant-order-detail.cell-item-3-value'),orderInfo.sublogs_count) }}</text>
					</view>
				</u-cell>
				<u-cell :isLink="false" :border="false">
					<text slot="title" class="cell-title">{{ $t('merchant-order-detail.cell-item-4') }}</text>
					<view slot="value" class="cell-value">
						<text>{{ orderInfo.create_time }}</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="flex-center text-sm m-t-md">
			<m-icon color="#888" name="file-list-2-line" text="提交记录"></m-icon>
		</view>
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
		<view class="sublog m-md " v-if="!listLoad">
			<view class="sublog-item rel section-bg m-b-md p-md p-t-sm p-b-sm text-sm radius-10" v-for="(item, index) in list.data" :key="index">
				<view class="flex-start">
					<text># {{ $util.handleStr($t('merchant-order-detail.sublog-item-sort'),item.sort) }}</text>
					<text class="sublog-item-badge badge m-l-sm text-fff" :class="{'bg-warning' : item.state == 1,'bg-success' : item.state == 2,'bg-danger' : item.state == 3}">{{item.state_text}}</text>
				</view>
				<view class="m-t-xs text-xs text-secondary">
					<view class="text-warning" v-if="item.audit_type">
						{{ $util.handleStr($t('merchant-order-detail.sublog-item-audit'),item.audit_type == 1 ? $t('merchant-order-detail.sublog-audit-1')  : $t('merchant-order-detail.sublog-audit-2'),item.create_time)}}
					</view>
					<view>
						{{$util.handleStr($t('merchant-order-detail.sublog-item-sub-time'),item.create_time)}}
					</view>
				</view>
				<view class="m-l-sm m-t-sm" style="color: #555;" v-if="item.sub_info">
					<view class="m-t-xs flex flex-column" v-for="(sub, sub_index) in item.sub_info" :key="sub_index">
						<view class="text-sm">
							<text>{{ sub.title }}</text>
						</view>
						<text class="text-md text-secondary" v-if="sub.type == 6 && sub.value">
							{{ sub.value }}
						</text>
						<view class="m-t-xs radius-10">
							<image :src="sub.value" mode="widthFix" style="width: 180rpx;height:180rpx" @click="$util.previewImage(sub.value)" v-if="sub.type == 7 && sub.value"></image>	
						</view>
					</view>
				</view>
				<view class="m-t-sm text-sm text-danger flex flex-column" v-if="item.state == 3 && item.audit_desc">
					<text>{{$t('merchant-order-detail.sublog-item-audit-2')}}</text>
					<text>{{ item.audit_desc }}</text>
				</view>
			</view>
		</view>
		
		<!-- 审核模态框 -->
		<m-modal
			:show="auditModal.show"
			:btn="$t('app.define-btn')"
			:title="auditModal.title"
			@btnComplete="auditSubmit"
			@close="auditModal.show = false"
		>
		<view class="slot-content p-md" v-if="auditModal.action == 1">
			<view class="slot-content_item text-sm">
				<u-parse :content="$t('work_detail.pass-modal-content')"></u-parse>
			</view>
		</view>
		<view class="modal-form" v-if="auditModal.action == 2">
			<view class="text-danger text-sm p-t-md p-b-md">
				<text class="text-xs">
					{{$t('work_detail.nopass-modal-content')}}
				</text>
			</view>
			<view class="modal-form_item modal-form_textarea flex-between">
				<i-icon name="t-box-line" size="40rpx" color="#999"></i-icon>
				<view class="modal-form__inline">
					<textarea :placeholder="$t('work_detail.nopass-modal-input-placeholder')" class="textarea" v-model="passText"></textarea>
				</view>
			</view>
		</view>
		</m-modal>
	
		<!-- 审核操作 -->
		<view class="foot-btns flex-between" v-if="orderInfo.state==2">
			<view class="foot-btns_btn foot-btns_pass">
				<u-button type="success" shape="circle" :text="orderInfo.type == 1 ? $t('merchant-order-detail.sublog-action-btn-1') : $t('merchant-order-detail.sublog-action-btn-2')"  @click="clickAuditBtn(1)"></u-button>
			</view>
			<view class="foot-btns_btn foot-btns_nopass">
				<u-button type="error" shape="circle"  :text="orderInfo.type == 1 ? $t('merchant-order-detail.sublog-action-btn-3') : $t('merchant-order-detail.sublog-action-btn-4')"  @click="clickAuditBtn(2)"></u-button>
			</view>
		</view>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
		
		<!-- 页面加载 -->
		<u-loading-page :loading="pageLoading" style="z-index: 99;"></u-loading-page>
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				scrollTop:0,
				pageLoading:true,
				orderId:'',
				orderInfo:false,
				passPopShow:false,
				passText:'',
				nopassPopShow:false,
				timeData: {},
				param:{
					page:1,
					order_id:''
				},
				list: {
					data: [],
					last_page: 1,
					current_page: 1
				},
				listLoad:true,
				auditModal:{
					show:false,
					action:1,
				}
				
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		
		onLoad(option){
			let {
				order_id
			} = option
			this.param.order_id = order_id
			this.orderId = option.order_id;
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onShow(){
			// 开始获取订单详情
			this.getTaskOrderInfo();
		},
		/* 页面隐藏 */
		onHide(){
			// 关闭加载
			uni.stopPullDownRefresh();
		},
		
		// 下拉刷新
		async onPullDownRefresh(){
			await this.getTaskOrderInfo();
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		
		methods: {
			onChange(e) {
                this.timeData = e
            },
			async getTaskOrderInfo(){
				let {
					param
				} = this
				let res = await this.$api.merchant.getTaskOrderInfo({id:param.order_id})
				if(res.code == 200){
					this.orderInfo = res.data;
					this.pageLoading = false;
					this.getSubLogList();
				}
			},
			async getSubLogList(page = 0){
				let {
					param
				} = this
				if(page){
					param.page = page
				}
				let res = await this.$api.merchant.getTaskOrderSubLog(param)
				if(res.code == 200){
					let newList = res.data
					if(page > 1){
						newList.data = this.list.data.concat(newList.data) // 合并数组
					}
					this.list = newList
					this.listLoad = false
				}
			},
			
			// 审核按钮点击
			clickAuditBtn(action = 1){
				let {
					auditModal,
					orderInfo
				}	= this
				let title = {
					1:{
						1: this.$t('merchant-order-detail.sublog-action-modal-title-1'),
						2: this.$t('merchant-order-detail.sublog-action-modal-title-2'),
					},
					2:{
						1: this.$t('merchant-order-detail.sublog-action-modal-title-3'),
						2: this.$t('merchant-order-detail.sublog-action-modal-title-4'),
					}
				}
				let data = {
					action:action,
					show:true,
					title:title[orderInfo.type][action]
				}
				this.auditModal = data
			},
			
			// 提交审核
			async auditSubmit(){
				this.$util.showLoading(this.$t('app.submiting'))
				let {
					param,
					passText,
					auditModal
				} = this
				let data = {
					id:param.order_id,
					action:auditModal.action,
					remarks:this.passText
				}
				let res = await this.$api.merchant.auditTaskOrder(data)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.auditModal.show = false;
						thos.getTaskOrderInfo();
					})
				}
			},
			
			async passOrder(){
				// 审核通过
				this.$util.showLoading(this.$t('app.submiting'))
				let data = {
					id:this.orderId,
					action:'pass'
				}
				let res = await this.$api.task.auditTaskOrder(data)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.passPopShow = thos.nopassPopShow = false
						thos.getTaskOrderInfo();
					})
				}
			},
			
			async nopassOrder(){
				// 审核拒绝
				this.$util.showLoading(this.$t('app.submiting'))
				let data = {
					id:this.orderId,
					action:'nopass',
					remarks:this.passText
				}
				let res = await this.$api.task.auditTaskOrder(data)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.nopassPopShow = false;
						thos.getTaskOrderInfo();
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		position: relative;
		background-color: $bgcolor-2;
	}
	/deep/ .m-state-icon{
		.state-warp_icon{
			display: none;
		}
	}
	// .m-state-icon{
	// 	padding-top: 15px;
	// }

	.edgeInsetBottom {
		width: 100%;
		height: 120rpx;
		background-color: transparent;
	}
	.task-info{
		position: relative;
		z-index: 1;
		padding-top: 20rpx;
		&_state{
			padding: 25rpx;
			text-align: center;
			font-weight: bold;
		}
		.state-6{
			color: #999;
		}
		&_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			font-size: 30rpx;
			padding: 10px 30rpx;
			// background-color: #ff572220!important;
			// color: #ff5722!important;
		}
	}
	.order-info{
		font-size: $contentSize;
		// padding: 30rpx;
		// box-shadow: 0px 5px 10px #F3F3F3; 
		&_title{
			padding: 30rpx 0;
			text-align: center;
			font-size: $titleSize;
			color: $incolor-2;
			// font-weight: bold;
			// border-bottom: 1px solid #f5f5f5;
		}
		
		// 组件样式
		.cell-title{
			font-weight: 400;
		}
		// .hig{
		// 	// display: none;
		// 	// box-shadow: 0px 0px 5px $maincolor-1; 
		// 	background-color: rgba(255, 212, 38, .2);
		// }
	}
	.foot-btns{
		position: fixed;
		bottom: 0;
		width: 100%;
		flex-wrap: nowrap;
		background-color: rgba(255, 255, 255, .5);
		&_btn{
			width: 100%;
			margin: 30rpx;
		}
		text{
		
		}
	}
	.head-card{
		font-size: $contentSize;
		padding: 30rpx;
		box-shadow: 0px 5px 10px #F3F3F3; 
		&_title{
			font-size: 32rpx;
			font-weight: bold;
		}
		&__label{
			margin-right: 10px;
		}
	}
	/deep/ .side-tools{
		// #ifdef APP-PLUS
		bottom: 120rpx!important;
		// #endif
		// #ifdef H5
		bottom: 130rpx;
		// #endif
	}
	.sublog-item-badge{
		padding: 5rpx 20rpx;
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 0;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
</style>
